<template>
  <div class="image-container" @wheel.prevent>
  <img class="cssk" src="../assets/images/微信图片_20240802162642.jpg">
    <div class="button-container">
    <button class="go-to-index-btn" @click="goindex">
      <img src="../assets/images/idx_18.png">
    <span>灯管理</span>
    </button>
      <button class="go-to-index-btn7" @click="goindex7">
        <img src="../assets/images/idx_18.png">
        <span>综合管理</span>
      </button>
  <button class="go-to-index-btn1" @click="goindex1">
    <img src="../assets/images/idx_19.png">
    <span>显示屏</span>
  </button>no
    <button class="go-to-index-btn2" @click="goindex2">
      <img src="../assets/images/idx_21.png">
      <span>监控</span>
    </button>
    <button class="go-to-index-btn3" @click="goindex3">
      <img src="../assets/images/idx_20.png">
      <span>环境监测</span>
    </button>

    <button class="go-to-index-btn4" @click="goindex4">
      <img src="../assets/images/idx_23.png">
      <span>WIFI</span>
    </button>
    <button class="go-to-index-btn5" @click="goindex5">
      <img src="../assets/images/idx_24.png">
      <span>广播音响</span>
    </button>
    <button class="go-to-index-btn6" @click="goindex6">
      <img src="../assets/images/idx_26.png">
      <span>客户管理</span>
    </button>
    </div>
  <el-dropdown class="user-dropdown" trigger="click">
      <span class="el-dropdown-link">
        <el-icon class="el-icon-user"></el-icon>
<!--        {{ name }}-->
        <i class="el-icon-caret-bottom"></i>
      </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
  <!-- 你可以根据需要添加更多下拉菜单项 -->
</el-dropdown-menu>
</el-dropdown>
    <img class="logo-image" src="../assets/images/logo.png">
    <h3 class="manage1">智慧物联管理系统</h3>
    <div class="module">
      <img class="idx1" src="../assets/images/idx_08.png">
      <img class="idx2" src="../assets/images/idx_08.png">
      <img class="idx3" src="../assets/images/idx_08.png">
      <img class="idx4" src="../assets/images/idx_08.png">
      <img class="idx5" src="../assets/images/idx_08.png">
      <img class="idx6" src="../assets/images/idx_08.png">
      <img class="idx7" src="../assets/images/idx_10.png">
      <img class="idx8" src="../assets/images/idx_10.png">
      <img class="idx9" src="../assets/images/idx_10.png">
      <img class="idx10" src="../assets/images/idx_10.png">
      <img class="idx11" src="../assets/images/idx_10.png">
      <img class="idx12" src="../assets/images/idx_10.png">
      <div>
        <h3 class="manage2">灯杆设备总数:{{deviceCounts.total_lights}}</h3>
        <h3 class="manage3">显示屏总数</h3>
        <h3 class="manage4">环境监测传感器总数</h3>
        <h3 class="manage5">摄像头总数</h3>
        <h3 class="manage6">WIFI总数</h3>
        <h3 class="manage7">广播设备总数</h3>
      </div>
    </div>
    <div>
    </div>
   </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import axios from "axios";
  const { name } = mapGetters({ name: 'name' });
  export default {
    computed: {
      ...mapGetters(['name']),
    },
    data(){
      return{
        deviceCounts: {
          total_lights: 0,
          totalDisplays: 0,
          totalEnvironmentMonitors: 0,
          totalVideoMonitors: 0,
          totalWifiDevices: 0,
          totalBroadcastDevices: 0,
        },
      };
    },
    mounted() {
      this.fetchDeviceCounts();
    },
    methods: {
      goindex() {
        this.$router.push({path: "/index"})
      },
      goindex1() {
        this.$router.push({path: "/index"})
      },
      goindex2() {
        this.$router.push({path: "/index"})
      },
      goindex3() {
        this.$router.push({path: "/index"})
      },
      goindex4() {
        this.$router.push({path: "/index"})
      },
      goindex5() {
        this.$router.push({path: "/index"})
      },
      goindex6() {
        this.$router.push({path: "/index"})
      },
      goindex7() {
        this.$router.push({path: "/index"})
      },
      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/index';
          })
        }).catch(() => {
        });
      },
      async fetchDeviceCounts(){
        try {
          const response = await axios.get('http://localhost:9093/system/equipment/counts');
          this.deviceCounts = response.data;
          //console.log(this.deviceCounts)
        } catch (error) {
          console.error('获取设备总数失败:', error);
        }
      },
    },
  };
</script>

<style scoped lang="scss">

.idx1{
  position: relative;
  margin-top: 20px;
  margin-left: 15%;
  width: 53px; /* 设置图片宽度 */
  height: 50px; /* 设置图片高度 */
  background-image: url("../assets/images/idx_01.png");
}
.idx2{
  position: absolute;
  margin-top: 35%;
  margin-left: -13%;
  width: 53px;
  height: 50px;
  background-image: url("../assets/images/idx_02.png");
  background-size: contain;
}
.idx3{
  position: absolute;
  margin-top: 63%;
  margin-left: -13%;
  width: 53px;
  height: 50px;
  background-image: url("../assets/images/idx_03.png");
  background-size: contain;
}
.idx4{
  position: absolute;
  margin-top: 92%;
  margin-left: -13%;
  width: 53px;
  height: 50px;
  background-image: url("../assets/images/idx_04.png");
  background-size: contain;
}
.idx5{
  position: absolute;
  margin-top: 120%;
  margin-left: -13%;
  width: 53px;
  height: 50px;
  background-image: url("../assets/images/idx_05.png");
  background-size: contain;
}
.idx6{
  position: absolute;
  margin-top: 150%;
  margin-left: -13%;
  width: 53px;
  height: 50px;
  background-image: url("../assets/images/idx_06.png");
  background-size: contain;
}
.idx7{
  position: absolute;
  margin-top: 12%;
  left: 36%;
}
.idx8{
  position: absolute;
  margin-top: 42%;
  left: 36%;
}
.idx9{
  position: absolute;
  margin-top: 70%;
  left: 36%;
}
.idx10{
  position: absolute;
  margin-top: 98%;
  left: 36%;
}
.idx11{
  position: absolute;
  margin-top: 127%;
  left: 36%;

}
.idx12{
  position: absolute;
  margin-top:158%;
  left: 36%;
}
.module{
  overflow: hidden;
  position: absolute;
  top: 10%;
  left: 0;
  width: 20%;
  height: calc(90% - 10px);
  background-color: rgba(255,255,255,0.005);
  z-index: 1;
  //box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
  //mix-blend-mode: overlay;

}

.manage1{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  color: #77f0ff; /* 设置文字颜色为蓝色 */
}

.manage2{
 // position: absolute;
  margin-top: -13%;
  margin-left: 40%;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold; /* 加粗字体 */
  letter-spacing: 2px; /* 增加字符间距 */
  word-spacing: 4px; /* 增加单词间距 */
}
.manage3{
  //position: absolute;
  margin-top: 26%;
  margin-left: 40%;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold; /* 加粗字体 */
  letter-spacing: 2px; /* 增加字符间距 */
  word-spacing: 4px; /* 增加单词间距 */
}
.manage4{
  //position: absolute;
  margin-top: 24.5%;
  margin-left: 40%;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold; /* 加粗字体 */
  letter-spacing: 2px; /* 增加字符间距 */
  word-spacing: 4px; /* 增加单词间距 */
}
.manage5{
  //position: absolute;
  margin-top: 25%;
  margin-left: 40%;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold; /* 加粗字体 */
  letter-spacing: 2px; /* 增加字符间距 */
  word-spacing: 4px; /* 增加单词间距 */
}
.manage6{
  //position: absolute;
  margin-top: 24%;
  margin-left: 40%;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold; /* 加粗字体 */
  letter-spacing: 2px; /* 增加字符间距 */
  word-spacing: 4px; /* 增加单词间距 */
}
.manage7{
  //position: absolute;
  margin-top: 27%;
  margin-left: 40%;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold; /* 加粗字体 */
  letter-spacing: 2px; /* 增加字符间距 */
  word-spacing: 4px; /* 增加单词间距 */
}

.logo-image{
  position: absolute; /* 图片绝对定位 */
  top: 0; /* 图片位于顶部 */
  left: 50%; /* 图片位于视口中心 */
  transform: translateX(-50%); /* 图片水平居中 */
  //width: 100px; /* 设置图片宽度 */
  height: 95px; /* 设置图片高度 */
  filter: grayscale(1);


}
.image-container {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  //display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

}
.cssk {
  //max-width: 100%;
  //height: auto;
  //display: block;
  //margin: 0 auto;
  width: 100%;
  height: 100%;
  //object-fit: cover;
  //display: block;
}
.button-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: -20%;//设置上边距
  margin-left: -24%;// 设置左外边距

}
.go-to-index-btn {
  //margin-top:7%;//设置上边距
  position: absolute; // 定位在背景图片上
  z-index: 10; // 确保按钮在图片之上
  border: none; // 无边框
  background-color: transparent;
  cursor: pointer; // 鼠标悬停时变为小手形状
  transition: all 0.3s ease; // 过渡效果
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 布局方向为垂直 */
  align-items: center; /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  padding: 10px; /* 调整内边距 */
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加阴影效果
  }
  img{
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 为图片添加过渡效果 */
    width: 90px; /* 设置图片宽度 */
    height: 100px; /* 设置图片高度 */
  }

}
.go-to-index-btn:hover img {
  transform: scale(1.1) translateY(-5px); /* 图片放大并向上移动 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0); /* 添加阴影效果 */
  filter: brightness(1.7);
}
.go-to-index-btn span{
  font-size: 16px;/* 文字大小 */
  color: #ffffff; /* 文字颜色 */
  margin-top: 15px; /* 文字距照片底部距离 */
}

.go-to-index-btn1{
  //margin-top:-2%;//设置上边距
  position: absolute; // 定位在背景图片上
  z-index: 10; // 确保按钮在图片之上
  border: none; // 无边框
  background-color: transparent;
  cursor: pointer; // 鼠标悬停时变为小手形状
  transition: all 0.3s ease; // 过渡效果
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 布局方向为垂直 */
  align-items: center; /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  padding: 10px; /* 调整内边距 */
  margin-left: 300px;
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加阴影效果
  }
  img{
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 为图片添加过渡效果 */
    width: 90px; /* 设置图片宽度 */
    height: 100px; /* 设置图片高度 */
  }

}
.go-to-index-btn1:hover img {
  transform: scale(1.1) translateY(-5px); /* 图片放大并向上移动 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0); /* 添加阴影效果 */
  filter: brightness(1.7);
}
.go-to-index-btn1 span{
  font-size: 16px;/* 文字大小 */
  color: #ffffff; /* 文字颜色 */
  margin-top: 15px; /* 文字距照片底部距离 */
}

.go-to-index-btn2{
  //margin-top:-4.5%;//设置上边距
  position: absolute; // 定位在背景图片上
  z-index: 10; // 确保按钮在图片之上
  border: none; // 无边框
  background-color: transparent;
  cursor: pointer; // 鼠标悬停时变为小手形状
  transition: all 0.3s ease; // 过渡效果
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 布局方向为垂直 */
  align-items: center; /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  padding: 10px; /* 调整内边距 */
  margin-left: 600px;
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加阴影效果
  }
  img{
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 为图片添加过渡效果 */
    width: 90px; /* 设置图片宽度 */
    height: 100px; /* 设置图片高度 */
  }

}
.go-to-index-btn2:hover img {
  transform: scale(1.1) translateY(-5px); /* 图片放大并向上移动 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0); /* 添加阴影效果 */
  filter: brightness(1.7);
}
.go-to-index-btn2 span{
  font-size: 16px;/* 文字大小 */
  color: #ffffff; /* 文字颜色 */
  margin-top: 15px; /* 文字距照片底部距离 */
}

.go-to-index-btn3{
  //margin-top:-5.5%;//设置上边距
  border-radius: 50px;
  position: absolute; // 定位在背景图片上
  z-index: 10; // 确保按钮在图片之上
  border: none; // 无边框
  background-color: transparent;
  cursor: pointer; // 鼠标悬停时变为小手形状
  transition: all 0.3s ease; // 过渡效果
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 布局方向为垂直 */
  align-items: center; /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  padding: 10px; /* 调整内边距 */
  margin-left: 900px;
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加阴影效果
  }
  img{
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 为图片添加过渡效果 */
    width: 90px; /* 设置图片宽度 */
    height: 100px; /* 设置图片高度 */
  }

}
.go-to-index-btn3:hover img {
  transform: scale(1.1) translateY(-5px); /* 图片放大并向上移动 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0); /* 添加阴影效果 */
  filter: brightness(1.7);
}
.go-to-index-btn3 span{
  font-size: 16px;/* 文字大小 */
  color: #ffffff; /* 文字颜色 */
  margin-top: 15px; /* 文字距照片底部距离 */
}


.go-to-index-btn4{
  //margin-top:-6%;//设置上边距
  border-radius: 50px;
  position: absolute; // 定位在背景图片上
  z-index: 10; // 确保按钮在图片之上
  border: none; // 无边框
  background-color: transparent;
  cursor: pointer; // 鼠标悬停时变为小手形状
  transition: all 0.3s ease; // 过渡效果
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 布局方向为垂直 */
  align-items: center; /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  padding: 10px; /* 调整内边距 */
  margin-left: 1200px;
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加阴影效果
  }
  img{
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 为图片添加过渡效果 */
    width: 90px; /* 设置图片宽度 */
    height: 100px; /* 设置图片高度 */
  }

}
.go-to-index-btn4:hover img {
  transform: scale(1.1) translateY(-5px); /* 图片放大并向上移动 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0); /* 添加阴影效果 */
  filter: brightness(1.7);
}
.go-to-index-btn4 span{
  font-size: 16px;/* 文字大小 */
  color: #ffffff; /* 文字颜色 */
  margin-top: 15px; /* 文字距照片底部距离 */
}

.go-to-index-btn5{
  //margin-top:-3%;//设置上边距
  position: absolute; // 定位在背景图片上
  z-index: 10; // 确保按钮在图片之上
  border: none; // 无边框
  background-color: transparent;
  cursor: pointer; // 鼠标悬停时变为小手形状
  transition: all 0.3s ease; // 过渡效果
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 布局方向为垂直 */
  align-items: center; /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  padding: 10px; /* 调整内边距 */
  margin-left: 1500px;
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加阴影效果
  }
  img{
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 为图片添加过渡效果 */
    width: 90px; /* 设置图片宽度 */
    height: 100px; /* 设置图片高度 */
  }

}
.go-to-index-btn5:hover img {
  transform: scale(1.1) translateY(-5px); /* 图片放大并向上移动 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0); /* 添加阴影效果 */
  filter: brightness(1.7);
}
.go-to-index-btn5 span{
  font-size: 16px;/* 文字大小 */
  color: #ffffff; /* 文字颜色 */
  margin-top: 15px; /* 文字距照片底部距离 */
}


.go-to-index-btn6{
  //margin-top:1%;//设置上边距
  position: absolute; // 定位在背景图片上
  z-index: 10; // 确保按钮在图片之上
  border: none; // 无边框
  background-color: transparent;
  cursor: pointer; // 鼠标悬停时变为小手形状
  transition: all 0.3s ease; // 过渡效果
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 布局方向为垂直 */
  align-items: center; /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  padding: 10px; /* 调整内边距 */
  margin-left: 1800px;
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加阴影效果
  }
  img{
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 为图片添加过渡效果 */
    width: 90px; /* 设置图片宽度 */
    height: 100px; /* 设置图片高度 */
  }

}
.go-to-index-btn6:hover img {
  transform: scale(1.1) translateY(-5px); /* 图片放大并向上移动 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0); /* 添加阴影效果 */
  filter: brightness(1.7);
}
.go-to-index-btn6 span{
  font-size: 16px;/* 文字大小 */
  color: #ffffff; /* 文字颜色 */
  margin-top: 15px; /* 文字距照片底部距离 */
}
.go-to-index-btn7{
  //margin-top:7%;//设置上边距
  position: absolute; // 定位在背景图片上
  z-index: 10; // 确保按钮在图片之上
  border: none; // 无边框
  background-color: transparent;
  cursor: pointer; // 鼠标悬停时变为小手形状
  transition: all 0.3s ease; // 过渡效果
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 布局方向为垂直 */
  align-items: center; /* 水平居中对齐 */
  justify-content: center; /* 垂直居中对齐 */
  padding: 10px; /* 调整内边距 */
  margin-left: 2100px;
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // 添加阴影效果
  }
  img{
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 为图片添加过渡效果 */
    width: 90px; /* 设置图片宽度 */
    height: 100px; /* 设置图片高度 */
  }

}
.go-to-index-btn7:hover img {
  transform: scale(1.1) translateY(-5px); /* 图片放大并向上移动 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0); /* 添加阴影效果 */
  filter: brightness(1.7);
}
.go-to-index-btn7 span{
  font-size: 16px;/* 文字大小 */
  color: #ffffff; /* 文字颜色 */
  margin-top: 15px; /* 文字距照片底部距离 */
}
.user-dropdown {
  position: absolute;
  top: 20px; // 调整到右上角
  right: 10px; // 调整到右上角
  // 增加违和感的样式
  //background-color: rgba(255, 255, 255, 0.7); // 半透明背景色
  border: 1px solid #ddd; // 添加边框
  border-radius: 4px; // 圆角边框
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); // 添加阴影
  transform: translateY(-50%); // 垂直居中
  cursor: pointer; // 鼠标悬停时变为小手形状
  transition: all 0.3s ease; // 过渡效果
  font-size: 20px;

  // 鼠标悬停时的样式
  &:hover {
    background-color: rgba(255, 255, 255, 0.9); // 悬停时背景色加深
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); // 悬停时阴影加深
  }
}

</style>
`
